import DocCardBox from "@/components/doc-card"
import React from "react"
import { Demo, demoJson } from "./demo"
import { DocApi, DocTitle } from "@/components"
import { useTranslation } from "react-i18next"

const leftList = [
    {
        titleKey: "default",
        hash: "ckbox-l-demo1",
        coms: [<Demo key={0} />],
        comsJson: [demoJson()],
        desc: [{ text: "ckbox_1_1_1" }]
    },
    {
        titleKey: "disabled",
        hash: "ckbox-l-demo2",
        coms: [<Demo key={0} disabled={true} />],
        comsJson: [demoJson("disabled")],
        desc: [{ text: "ckbox_2_1_1" }]
    }
]

const rightList = [
    {
        titleKey: "readonly",
        hash: "ckbox-r-demo1",
        coms: [<Demo key={0} readOnly={true} />],
        comsJson: [demoJson("readOnly")],
        desc: [{ text: "ckbox_3_1_1" }]
    }
]

function CheckBoxDoc() {
    const { t } = useTranslation()

    const apiList = [
        {
            title: "CheckboxProps",
            data: [
                {
                    schema: "label",
                    type: "string",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("desc_ckbox_1")
                },
                {
                    schema: "defaultChecked",
                    type: "boolean",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("desc_ckbox_2")
                },
                {
                    schema: "checked",
                    type: "boolean",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("desc_ckbox_3")
                },
                {
                    schema: "disabled",
                    type: "boolean",
                    defaultValue: "false",
                    isRequire: t("no"),
                    desc: t("desc_ckbox_4")
                },
                {
                    schema: "readOnly",
                    type: "boolean",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_ckbox_5")
                },
                {
                    schema: "value",
                    type: "string | number | boolean",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_ckbox_6")
                },
                {
                    schema: "onClick",
                    type: "DivMouseType",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("click_event")
                },
                {
                    schema: "onTouchStart",
                    type: "DivTouchType",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("touch_event")
                },
                {
                    schema: "onChange",
                    type: "(e) => void",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("desc_ckbox_9")
                },
                {
                    schema: "classNames",
                    type: "CheckboxClassNames",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_ckbox_10")
                }
            ]
        }
    ]
    return (
        <div>
            <DocTitle title="CheckBox" desc="checkboxDesc" />
            <DocCardBox leftList={leftList} rightList={rightList} />
            <DocApi list={apiList} />
        </div>
    )
}

export default CheckBoxDoc
